import { memo } from 'react';
import type { FC } from 'react';
import { Typography } from 'antd';
import {
  QuestionParagraphPropsType,
  QuestionParagraphDefaultProps,
} from './Interface';

const { Paragraph } = Typography;
const QuestionParagraph: FC<QuestionParagraphPropsType> = (
  props: QuestionParagraphPropsType
) => {
  const { text = '', isCenter } = {
    ...QuestionParagraphDefaultProps,
    ...props,
  };
  const textList = text.split('\n');
  return (
    <Paragraph
      style={{ textAlign: isCenter ? 'center' : 'left', marginBottom: '20px' }}
    >
      {textList.map((t, index) => (
        <span key={index}>
          {index > 0 && <br />}
          {t}
        </span>
      ))}
    </Paragraph>
  );
};

export default memo(QuestionParagraph);
